<template>
  <div>
      客户端名：<input type="text" v-model="client">
      分数：<input type="text" v-model="grade">
      <button @click="upload">上传</button>
      <div>
          <button @click="show">按钮</button><br>
          <table border="1px" >
              <tr>
                  <th>排名</th>
                  <th>用户名</th>
                  <th>分数</th>
              </tr>
              <tr v-for="i in rank_list">
                  <td>{{i.id}}</td>
                  <td>{{i.client}}</td>
                  <td>{{i.grade}}</td>
              </tr>
          </table>

      </div>
  </div>

</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            client:'',
            grade:'',
            rank_list:[],

        }
    },
    methods:{
        upload(){
            axios.post("http://127.0.0.1:8000/upload/",{'client':this.client,'grade':this.grade}).then(res=>{
                console.log(res.data)
                if(res.data.code=='200'){
                    alert(res.data.msg)
                }else{
                  alert(res.data.msg)  
                }
            })
        },
        show(){
            axios.get("http://127.0.0.1:8000/show",{params:{'num1':1,'num2':3,'uid':2}}).then(res=>{
                console.log(res.data)
                this.rank_list = res.data.rank_list
            })
        }

    }

}
</script>

<style>
table{
    border: 1px solid darkblue;
    width: 300px;
    height: 100px;
}
</style>